<template>
  <div class="bookitem" v-for="(item, index) in bookList" :key="item.ISBN">
    <img class="book-pic" :src="ImgUtil.getImg(item.bookpicname)" alt="" />
    <div class="bookinfo">
      <div class="bookinfo-brief">
        <div class="book-name">{{ item.bookname }}</div>
        <div class="book-author-publs">
          <span class="author spacing">{{ item.author }}</span>
          <span class="separator spacing"> | </span>
          <span class="publs spacing">{{item.publishername}}</span>
        </div>
      </div>
      <div class="bookinfo-other">
        <div class="price">
          <span class="discountprice spacing">
            <span class="symbol">&yen;</span>
            {{ item.discountprice }}
          </span>
          <span class="originprice spacing">&yen;{{item.originalprice}}</span>
          <span class="discount">{{item.discount}}折</span>
        </div>
        <div class="give">
          <span class="self-support">自营</span>
          <span class="coupons">券</span>
          <span class="free-shipping">包邮</span>
        </div>
        <div class="monthsalescount">
          <span>月售 {{ item.monthsalecount }}</span>
        </div>
        <div class="ranklist">
          <span>图书畅销总排行榜第1名</span>
        </div>
        <div>
          <Addsubtrsc :bookitem="item"></Addsubtrsc>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Addsubtrsc from "./addsubtrsc.vue";
import ImgUtil from "@/utils/imgutil"
import books from "../service"
const {
  findBooksByThirdCtgyId,
  storeRefs: { bookList },
} = books
findBooksByThirdCtgyId()
</script>

<style lang="scss" scoped>
.bookitem {
  display: grid;
  grid-template-columns: 2.34rem 2.7rem;
  justify-items: center;
  margin-top: 0.2rem;
  .book-pic {
    justify-self: start;
    width: 1.8rem;
    height: 2.2rem;
    object-fit: contain; /* 设置图像适应容器 */
  }
  .bookinfo {
    display: grid;
    grid-template-columns: 2.7rem;
    /* 上半部分 */
    &-brief {
      line-height: 0.35rem;
      .book-name {
        font-size: 0.25rem;
        color: #4c4c4c;
      }
      .book-author-publs {
        color: #848484;
        .spacing {
          margin-right: 0.09rem;
        }
      }
    }
    /* 下半部分 */
    &-other {
      line-height: 0.36rem;
      /* 第一部分 */
      .price {
        .spacing {
          margin-right: 0.27rem;
        }
        .discountprice {
          font-size: 0.27rem;
          color: #e94039;
          .symbol {
            font-size: 0.27rem;
          }
        }
        .originprice,
        .discount {
          color: #c6c6c6;
          font-size: 0.18rem;
        }
        .originprice {
          text-decoration: line-through;
        }
      }
      /* 第二部分 */
      .give {
        display: flex;
        column-gap: 0.05rem;
        line-height: 0.2rem;
        font-size: 0.15rem;
        .self-support {
          padding: 0 0.15rem;
          border-radius: 0.05rem;
          text-shadow: 0 0.005rem #7f7f7f;
          color: white;
          background-color: #eb636d;
        }
        .coupons {
          padding: 0 0.15rem;
          border-radius: 0.05rem;
          border: 1px #d06d70 solid;
          color: #7f7f7f;
          text-shadow: 0 0.005rem #d06d70;
          background-color: #fff;
        }
        .free-shipping {
          padding: 0 0.15rem;
          border-radius: 0.05rem;
          border: 1px #d06d70 solid;
          color: #7f7f7f;
          text-shadow: 0 0.005rem #d06d70;
          background-color: #fff;
        }
      }
      /* 第3部分+第4部分公共样式 */
      .monthsalescount,
      .ranklist {
        color: #db8441;
        font-size: 0.2rem;
        padding: 0.04rem;
      }

      /* 第4部分 */
      .ranklist {
        background-color: #fef3ed;
        text-indent: 0.04rem;
      }
    }
  }
}
</style>
